<template>
	<!-- 优惠券列表 -->
	<div class="content">
		<div class="content-top">
			优惠券选择
		</div>
		
		<div class="content-search">
			<el-form :inline="true" class="demo-form-inline" style="margin-top: 20px;">
				<el-form-item label="优惠券名称：">
					<el-input placeholder="优惠券名称" v-model="name"></el-input>
				</el-form-item>
               <el-form-item label="状态：">
				   <el-select placeholder="请选择" v-model="state">
						<el-option
						v-for="item in couponType"
						:key="item.id"
						:label="item.name"
						:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="时间范围：">
					 <el-date-picker
						v-model="time"
						type="datetimerange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						value-format="yyyy-MM-dd HH:mm:ss">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSearch" icon="el-icon-search">搜索</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="content-table">
			<el-table :data="tableData" show-header stripe style="width: 100%;" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
				<el-table-column prop="name" align="center" label="优惠券名称"  width="120">
				</el-table-column>
				<el-table-column prop="code" align="center" label="优惠券编码"  width="150">
				</el-table-column>
				<el-table-column prop="publishCount" align="center" label="发行数量">
				</el-table-column>
				<el-table-column prop="receiveCount" align="center" label="已领取数量" width="120">
				</el-table-column>
				<el-table-column prop="useCount" align="center" label="已使用数量" width="120">
				</el-table-column>
				<el-table-column align="center" label="面额">
					<template slot-scope="scope">
						{{scope.row.amount +'元'}}
					</template>
				</el-table-column>
				<el-table-column align="center" label="使用条件">
					<template slot-scope="scope">
						{{scope.row.minPoint == 0?'无限制':'满'+scope.row.minPoint+'元'}}
					</template>
				</el-table-column>
				<el-table-column prop="startTime" align="center" label="生效时间" width="160">
				</el-table-column>
				<el-table-column prop="endTime" align="center" label="失效时间" width="160">
				</el-table-column>
				<el-table-column align="center" label="状态">
					<template slot-scope="scope">
						{{scope.row.type}}
					</template>
				</el-table-column>
			</el-table>
            <div class="content-page">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
                :page-size=limit layout="prev, pager, next, jumper" :total=total>
                </el-pagination>
            </div>
		</div>
		
        <div class="car-title center-button">
			<center>
				<el-button type="primary" @click="onClick">确认</el-button>
                <el-button type="primary" @click="cancel">返回</el-button>
			</center>
		</div>
        <template v-if="is_coupon">
			<div class="all-screen"></div>
			<div class='add-box'>
				<div class="edit-top">
                    <span>优惠券列表</span>
                    <i class="el-icon-close" @click="close_coupon"></i>
                </div>
                <div class="table_coupon">
                    <el-table ref="coupon" :data="multipleSelection" show-header stripe style="width: 100%;" @selection-change="handleSelectionChange">    
                        <el-table-column prop="name" align="center" label="优惠券名称">
                        </el-table-column>
                        <el-table-column align="center" label="面额">
							<template slot-scope="scope">
								  {{scope.row.amount + '元'}}
							</template>
                        </el-table-column>
                        <el-table-column align="center" label="设定没人限领张数">
							<template slot-scope="scope">
								  <el-input-number size="small" v-model="numList[scope.row.index]" @change="handleChange" :min="1" label="描述文字"></el-input-number>
							</template>
                        </el-table-column>
                    </el-table>
                </div>
				<div class="car-title center-button">
					<center>
						<el-button type="primary" @click='clickCoupon'>确定</el-button>
						<el-button type="primary" @click='close_coupon'>取消</el-button>
					</center>
				</div>
			</div>
		</template>
	</div>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				id: 'id',
				tableData: [],
				limit: 10,
				page: 1,
				total: 1,
				couponType:[{id:0,name:'0'},{id:1,name:'1'},{id:2,name:'2'},{id:3,name:'3'}],
				name:'',
				state:'',
                time:'',
                multipleSelection:[],
				is_coupon:false,
				numList:[]
				
			}
		},
		mounted() {
			this.get_list();
		},
		methods: {
			handleChange(){
				for(let i=0;i<this.multipleSelection.length;i++){
				   this.multipleSelection[i].num = this.numList[i]
				}
			},
			clickCoupon(){
				var self = this
				var result = []
				for(let item of this.multipleSelection){
				   result.push({'couponId':item.id,'restrict':item.num,'type':1})
				}
				this.$axios.post(this.$global.serverIp + 'frontend/activityRules/saveOrUpdate', {
				  'conditionContent':result,
				}).then(res =>{
					if(res != ''){
						var temp = {
							list:this.multipleSelection,
							id:res.data.id
						}
                        this.$emit('coupon',temp)
					}
				})
			},
            onClick(){
				this.is_coupon = true
				for(let i=0;i<this.multipleSelection.length;i++){
				   this.multipleSelection[i].index = i
				   this.numList.push(1)
				   this.multipleSelection[i].num = this.numList[i]
				}
            },
            cancel(){
                this.$emit('coupon',1)
            },
			onSearch(){
				this.page = 1
				this.get_list()
			},
			textConversion(idx){
				for(let item of this.couponType){
					if(item.id == idx){
                      return item.name
					}
				}
            },
            handleSelectionChange(val) {
				this.multipleSelection = val
            },
			get_list() {
				var self = this;
				var start = ''
				var end = ''
				if(self.time != null){
					start = self.time[0]
					end = self.time[1]
				}
				this.$axios.post(this.$global.serverIp + 'frontend/coupon/findPage', {
				 "limit": self.limit + "",
				 "page": self.page + "",
				 "name":self.name,
				 "type":self.state,
				 "startTime":start,
				 "endTime":end
				})
				  .then(function (res) {
					  if(res != ''){
						  self.tableData = res.data.list;
						  self.total = res.data.totalCount;
						  self.page = res.data.currPage;
					  }
						
				  })
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.page = val;
				this.get_list();
				console.log(`当前页: ${val}`);
			},
			close_coupon(){
				this.is_coupon = false
			},
		},

	}
	import '@/assets/css/common.css'
</script>
<style scoped>
    .table_coupon{
        width:90%;
        margin: 40px auto;
    }
	.center-button{
		margin-bottom: 40px;
	}
</style>
